<template lang="pug">
el-dialog(
  custom-class="material-modal"
  :visible.sync="show"
  width="976px"
  @open="beforeOpen"
  :before-close="close"
  :close-on-click-modal="false"
)
  .modal-title.border-bottom(slot="title") 添加材料
  .modal-content
    .content-filter
      el-input(placeholder="请输入材料名称" v-model="searchString" @change="changeSearch")
      el-select(placeholder="全部品牌" v-model="brandId" @change="changeBrand" clearable)
        el-option(value="" label="全部品牌")
        el-option(v-for="item in brandList", :value="item.id", :label="item.name", :key="item.id")
    .content-table
      el-table(
        :data="list"
        style="width: 100%"
        max-height="450"
        :header-cell-style="{ background: '#F8F7FC', fontSize: '14px', color: '#64698F' }"
        border
        @selection-change="handleSelectionChange"
      )
        el-table-column(width="55" align="center" type="selection")
        el-table-column(label="材料名称" min-width="200")
          template(slot-scope="scope")
            .table-item
              .table-item-img(:style="{ 'background-image': `url(${scope.row.picImg})` }")
              .table-item-bd
                .table-item-name {{scope.row.materialName}}
        el-table-column(label="品牌名称" prop="brandName")
        el-table-column(label="供应商" prop="regionName")
  .modal-footer(slot="footer")
    el-pagination(
      background
      layout="prev, pager, next, jumper"
      :total="total"
      :page-size="pageSize"
      @current-change="currentChange"
    )
    .footer-handle
      el-button(size="small" @click="close") 取消
      el-button(size="small" type="primary" @click="confirm") 确定
</template>

<script>
import { getBrandList, getMaterialList } from 'api'
export default {
  name: 'selectMaterialModal',
  props: {
    show: Boolean,
    materialList: Array
  },
  data () {
    return {
      searchString: '',
      brandId: '',
      brandList: [],
      list: [],
      page: 1,
      pageSize: 10,
      total: 0,
      selections: []
    }
  },
  methods: {
    beforeOpen () {
      this.list = []
      this.searchString = ''
      this.brandId = ''
      this.getBrandList()
      this.getList()
    },
    changeSearch () {
      this.page = 1
      this.getList()
    },
    changeBrand () {
      this.page = 1
      this.getList()
    },
    currentChange (page) {
      this.page = page
      this.getList()
    },
    handleSelectionChange (selections) {
      this.selections = selections
    },
    confirm () {
      if (this.selections.length) {
        if (10 - this.materialList.length < this.selections.length) {
          this.$message.error('文章最多可添加10款材料!')
          return
        }
        this.$emit('confirm', this.selections)
      } else {
        this.$message.error('请先选择要添加的材料！')
      }
    },
    async getList () {
      try {
        let query = {
          searchString: this.searchString,
          brandId: this.brandId,
          currentPage: this.page,
          pageLines: this.pageSize,
          status: 2 
        }
        if (this.materialList.length) {
          query.materialIdList = this.materialList.map(item => item.materialId || item.id)
        }
        const { ResultSet } = await this.$axios.post(getMaterialList, { ...query })
        ResultSet.userData.result.forEach(item => { item.isChecked = false })
        this.list = ResultSet.userData.result
        this.total = ResultSet.recordNumber
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getBrandList () {
      try {
        const { ResultSet } = await this.$axios.post(getBrandList)
        this.brandList = ResultSet.userData.loadBrandList
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    close () {
      this.$emit('close')
    }
  }
} 
</script>

<style type="text/css" lang="scss">
.material-modal {
  .el-dialog__header {
    border-bottom: 1px solid #EDEDED;
  }
}
</style>

<style lang="scss" scoped>
.modal-content {
  padding: 0 32px;
}
.content-filter {
  padding: 8px 0;
  display: flex;
  align-items: center;
  .el-input {
    width: 336px;
    margin-right: 24px;
  }
  .el-select {
    width: 166px;
  }
}
.content-table {
  .el-table {
    color: #3E4373;
  }
}
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.table-item {
  display: flex;
  align-items: center;
  .table-item-img {
    width: 58px;
    min-width: 58px;
    height: 52px;
    margin-right: 8px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .table-item-bd {
    flex: 1;
  }
  .table-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
</style>
